<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    全选<input type="checkbox" class="checkAll">
    <br>
    单选
    <input type="checkbox" class="checkOne">
    <input type="checkbox" class="checkOne">
    <input type="checkbox" class="checkOne">


    <script>

        // 报错
        //    1 xxxx    is not defined   变量没有声明，写了字符串没加引号
        //    2 xxxx    is not a function  函数名写错了，或者就不是一个函数，或者这个对象没有这个方法
        //    3 Cannot set properties of null (setting 'oncliock')
        //      Cannot read properties of undefined (reading 'push')
        //      说明对象没有拿到   



        // 给全选绑定点击事件
        //     如果全选是选中的，所有的单选也都选中
        //     如果全选是没有选中的，所有的单选也都不选中


        // 1 获取元素
        var oAll = document.querySelector('.checkAll');
        var oOnes = document.querySelectorAll('.checkOne');

        // 2 绑定点击事件
        // console.log(oAll);  // null
        oAll.onclick = function () {
            // alert(1);   // 测试一下点击事件是否绑定上

            //     如果全选是选中的，所有的单选也都选中
            //     如果全选是没有选中的，所有的单选也都不选中

            // if (oAll.checked) {
            //     // console.log('选中')
            //     // 给每一个单选都选中  
            //     // console.log(oOnes);
            //     for (var i = 0; i < oOnes.length; i++) {
            //         // console.log(666666666666);
            //         oOnes[i].checked = true;
            //     }
            // }
            // else {
            //     // console.log('没中')
            //     // 给每一个单选都不选中
            //     for (var i = 0; i < oOnes.length; i++) {
            //         // console.log(666666666666);
            //         oOnes[i].checked = false;
            //     }
            // }

            for (var i = 0; i < oOnes.length; i++) {
                oOnes[i].checked = this.checked;
            }
        }





        // 反选

        // 给每一个单选绑定事件
        // for (var i = 0; i < oOnes.length; i++) {
        //     oOnes[i].onclick = function () {
        //         // alert(1);
        //         // 判断是不是所有的单选都选中了
        //         // if (oOnes[0].checked && oOnes[1].checked && oOnes[2].checked) {
        //         //     oAll.checked = true;
        //         // }
        //         // else {
        //         //     oAll.checked = false;
        //         // }


        //         // 计数器
        //         var count = 0;
        //         // 判断每一个单选
        //         for (var i = 0; i < oOnes.length; i++) {
        //             if (oOnes[i].checked) {
        //                 count++;
        //             }
        //         }
        //         // 判断count的值
        //         // if (count === oOnes.length) {
        //         //     oAll.checked = true ;
        //         // }
        //         // else {
        //         //     oAll.checked = false ;
        //         // }
        //         // oAll.checked = count === oOnes.length ? true : false;
        //         oAll.checked = count === oOnes.length;
        //     }
        // }



        for (var i = 0; i < oOnes.length; i++) {
            oOnes[i].onclick = function () {


                // // 假设法
                // var flag = true;
                // // 判断每一个单选
                // for (var i = 0; i < oOnes.length; i++) {
                //     if (!oOnes[i].checked) {
                //         flag = false;
                //         break;
                //     }
                // }

                // oAll.checked = flag;


                for (var i = 0; i < oOnes.length; i++) {
                    if (!oOnes[i].checked) {
                        break;
                    }
                }

                // 判断循环是否提前结束
                oAll.checked = i === oOnes.length;

            }
        }




    </script>

</body>

</html>